<template>
    <div class="product">
        <div class="topdesc">
            <div class="callback" @click="$router.push('/shouye')">
                <img src="../../assets/images/callback.png" alt="">
            </div>
            <div class="desc">আমার ধার</div>
        </div>
        <div class="p-title">আমার ঋণের ইতিহাস</div>
        <div class="p-goodsList" v-for="(item, index) in list" :key="item.id" @click="doClick(index, item)">
            <!-- 商品top -->
            <div class="p-gl-top">
                <div class="p-gl-top-img">
                    <img :src="toICon(item.icon)" alt="">
                </div>
                <div class="p-gl-top-name">{{ item.name }}</div>
            </div>
            <!-- 商品内容 -->
            <div class="p-gl-context">
                <div class="p-gl-left">
                    <ul>
                        <li>ঋণের পরিমাণ (₹)</li>
                        <li>ঋণের মেয়াদ (দিন)</li>
                    </ul>
                </div>
                <div class="p-gl-right">
                    <ul>
                        <li>{{ item.amount }}</li>
                        <li>{{ item.term }}</li>
                    </ul>
                </div>
            </div>
            <!-- 分割线 -->
            <div class="p-line"></div>
            <div class="p-info">
                <div class="p-info-left">
                    <ul>
                        <li>ঋণের পরিমাণ</li>
                        <li>ঋণের মেয়াদ (দিন)</li>
                        <li>ঋণ তারিখ</li>
                    </ul>
                </div>
                <div class="p-info-right">
                    <ul>
                        <li>{{ item.amount }}</li>
                        <li>{{ item.term }} {{ item.termUnit }}</li>
                        <li>{{ new Date(item.created).toLocaleDateString() }}</li>
                    </ul>
                </div>
            </div>
            <!-- 选中按钮 -->
            <div class="p-select">
                <img src="../../assets/images/order-m.png" alt="" v-if="activeId === index">
                <img src="../../assets/images/order.png" alt="" v-else>
            </div>
        </div>
        <van-button v-if="list.length !== 0" class="p-btn" @click="doApply" :disabled="activeId < 0">আবেদন করুন</van-button>
        <van-dialog v-model="show" title="হ্যান্ডলিং ফি ট্রায়াল গণনা" show-cancel-button confirmButtonText="নিশ্চিত"
            cancelButtonText="বাতিল করুন" @confirm="handleConfirm">
            <productpay :payList="payList" v-if="payList"></productpay>
            <!-- <productpay :payList="payList"></productpay> -->
        </van-dialog>
        <noProduct v-if="list.length === 0"></noProduct>
    </div>
</template>
<script>
import { getProductListAPI, getOrderPayAPI, daikuanshenqingAPI } from "../../api";
import { jiami, jiemi } from "../../utils/AESKey.js";
import productpay from './productpay'
import { Toast } from "vant";
import noProduct from './noProduct'
export default {
    components: { productpay, noProduct },
    data() {
        return {
            isShow: true,
            list: [],
            // 选中
            isXuanzhong: false,
            isActive: [],
            //弹框的布尔值
            show: false,
            //手续费试算list
            payList: [],
            // 选中id
            activeId: '',
            //选中的项
            item: ''
        }
    },
    methods: {
        toICon(id) {
            return `https://app.pocketgo.xyz/lt-image/resize/0x0/${id}`
        },
        //点击产品
        doClick(index, item) {
            this.item = item
            this.activeId = index
            // for (let i = 0; i < this.isActive.length; i++) {
            //     if (i !== index) {
            //         this.isActive[i].isChecked = false;
            //     }
            // }
            // this.isActive.filter(item => item.)
            // console.log(this.isActive[index].isChecked, 'active')
            // this.isActive[index].isChecked = !this.isActive[index].isChecked
            // this.isActive[index].id = item.id
            // console.log(this.isActive)
        },
        //获取产品列表信息
        async getproduceList() {
            const f = {
                query: {}
            }
            const res = await getProductListAPI(jiami(f))
            try {
                console.log(jiemi(res.data), '产品数据')
                this.list = jiemi(res.data).page.content
            } catch (error) {

            }
        },
        //选中商品去贷款
        async doApply() {
            console.log(this.item, 'item')
            const f = {
                model: {
                    productIds: []
                }
            }
            console.log(this.item.id)
            f.model.productIds.push(this.item.id)
            console.log(f, '手续费试算参数')
            const res = await getOrderPayAPI(jiami(f))
            try {
                console.log(jiemi(res.data))
                this.payList = jiemi(res.data).model
                console.log(this.payList, 'payList')
            } catch (error) {

            }
            this.show = true
        },
        //点击去申请贷款
        async handleConfirm() {
            const f = {
                model: {
                    productIds: []
                }
            }
            f.model.productIds.push(this.item.id)
            console.log(f, '申请贷款参数')
            const res = await daikuanshenqingAPI(jiami(f))
            try {
                console.log(jiemi(res.data), '申请贷款的结果')
                Toast('সফল আবেদন')
                this.$router.push('/order')
                this.$store.commit('changeCount', 1)
            } catch (error) {

            }
        }
    },
    created() {
        this.getproduceList()
    },
    computed: {
        isdisabled() {
            return this.isActive.some(item => item.isChecked === true)
        }
    }
}
</script>
<style lang="less" scoped>
.product {
    width: 100vw;
    min-height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (90/@a);
    padding-bottom: (20/@a);

    .topdesc {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100vw;
        background: #6B82D8;
        border-radius: 0 0 (26/@a) (26/@a);
        text-align: center;
        padding-bottom: (16/@a);

        .info {
            font-size: (10/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF;
            margin-top: (15/@a);
        }

        .desc {
            font-size: (16/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF
        }

        .callback {
            line-height: (67/@a);
            width: (25/@a);
            height: (25/@a);
            margin-left: (22/@a);

            img {
                width: 100%;
            }
        }
    }

    .p-goodsList {
        position: relative;
        width: (330/@a);
        background: #FFFFFF;
        border-radius: (16/@a);
        margin-top: (10/@a);
        margin-left: (23/@a);
        padding-left: (19/@a);
        padding-right: (19/@a);

        .p-info {
            display: flex;

            ul {
                li {
                    margin-top: (10/@a);
                }
            }

            .p-info-left {
                width: (165/@a);
                height: (120/@a);
                text-align-last: left;
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #2D2D2D;
            }

            .p-info-right {
                width: (165/@a);
                height: (120/@a);
                text-align: right;
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #626262;
            }
        }

        .p-gl-context {
            display: flex;

            .p-gl-left {
                text-align: left;
                width: (165/@a);
                height: (50/@a);

                ul {
                    li {
                        margin-top: (5/@a);
                        font-size: (13/@a);
                        font-family: Nirmala UI;
                        font-weight: bold;
                        color: #383838;
                    }
                }
            }

            .p-gl-right {
                text-align: right;
                width: (165/@a);
                height: (50/@a);

                ul {
                    li {
                        font-size: (13/@a);
                        font-family: Nirmala UI;
                        font-weight: bold;
                        color: #383838;
                        margin-top: (5/@a);
                    }
                }
            }
        }

        .p-gl-top {
            padding-top: (13/@a);
            box-sizing: border-box;

            .p-gl-top-img {
                width: (35/@a);
                height: (35/@a);
                background: #415AB8;
                border-radius: 50%;
                margin-left: (128/@a);
                margin-bottom: (9/@a);

                img {
                    width: 100%;
                }
            }

            .p-gl-top-name {
                margin-left: (114/@a);
                font-size: (13/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #808080;
            }
        }

        .p-line {
            width: (290/@a);
            height: (1/@a);
            background: #E0E0E0;
            border-radius: 0px;
            margin-top: (15/@a);
        }


        .p-select {
            position: absolute;
            top: (9/@a);
            right: (13/@a);
            width: (27/@a);
            height: (27/@a);

            img {
                width: 100%;
            }
        }
    }

    .p-btn {
        width: (330/@a);
        height: (53/@a);
        margin-left: (23/@a);
        margin-top: (43/@a);
        background: #415AB8;
        border-radius: (10/@a);
        font-size: (16/@a);
        text-align: center;
        line-height: (53/@a);
        font-family: Nirmala UI;
        font-weight: bold;
        color: #FFFFFF;
    }

    .p-title {
        font-size: (16/@a);
        font-family: Nirmala UI;
        font-weight: bold;
        color: #000000;
        margin-top: (14/@a);
        margin-left: (22/@a);
    }
}
</style>